<extend name="Public/base" />
<block name="style">
<link rel="stylesheet" type="text/css"
	href="__STATIC__/css/compiled/wizard.css">

<link rel="stylesheet" type="text/css"
	href="__STATIC__/css/libs/dropzone.css">
</block>

<block name="body">
<div class="row">
	<div class="col-lg-12">
		<div class="main-box clearfix" style="min-height: 1180px;">
			<header class="main-box-header clearfix">
				<h2>
					添加用户
				</h2>
			</header>
			<div class="main-box-body clearfix">
				<div id="addUserWizard" class="wizard">
					<div class="wizard-inner">
						<ul class="steps">
							<li data-target="#step1" class="active"><span
								class="badge badge-primary">1</span>添加资料<span class="chevron"></span></li>
							<li data-target="#step2"><span class="badge">2</span>上传头像<span
								class="chevron"></span></li>
						</ul>
						<div class="actions">
							<button type="button" class="btn btn-default btn-mini btn-prev">
								<i class="icon-arrow-left"></i>上一步
							</button>
							<button type="button" class="btn btn-success btn-mini btn-next ajax-post" target-form="form-horizontal"
								data-last="完成">
								下一步 
							</button>
							
							
						</div>
					</div>
					<div class="step-content">
						<div class="step-pane active" id="step1">

							<h4></h4>
							<form class="form-horizontal" action="{:U()}" method="post" >

								<input name="avatar_id" id="user_avatar_hidden" type="hidden" value="0" />
								<div class="form-group">
									<label for="UserName" class="col-lg-1 control-label">用户名称</label>
									<div class="col-lg-11">
										<input type="text" name="username" class="form-control"
											id="UserName" placeholder="用户名称(英文或者数字)">
									</div>
								</div>
								
								<div class="form-group">
									<label for="Email" class="col-lg-1 control-label">用户邮箱</label>
									<div class="col-lg-11">
										<input type="email" name="email" class="form-control"
											id="Email" placeholder="用户邮箱">
									</div>
								</div>
								
							 		<div class="form-group">
									<label for="Password" class="col-lg-1 control-label">用户密码</label>
									<div class="col-lg-11">
										<input type="text" name="password" class="form-control"
											id="Password" placeholder="用户密码(6-12位)">
									</div>
								</div>
							</form>
						</div>
						<div class="step-pane" id="step2">

							<h4 style="text-align: center;">
								上传头像120*120 <span id="upload_tips"></span>
							</h4>
							<div class="form-group">

								 
									<input type="file" name="avatar" id="user_avatar_file"
										style="display: none;">

									<div id="dropzone">
										<div id="avatar-upload" class="dropzone dz-clickable">
											<div id="user_avatar_tip" class="dz-default dz-message">

											</div>
											<img id="user_avatar_img" width="120" height="120"
												class="avatar-center" src="__STATIC__/images/uploading.png"
												style="display: none;">
										</div>

									</div>
							</div>
						</div>

					</div>

				</div>
			</div>
		</div>
	</div>
</div>


</block>

<block name="script"> <script src="__STATIC__/js/wizard.js"></script>
<script type="text/javascript"
	src="__STATIC__/js/jquery.fileupload.js"></script> <script
	type="text/javascript">
		 

		//选择图片文件之后立即上传表单
		$('#user_avatar_file').change(function() {
			$('#upload_tips').html('-上传中...');
			$("#user_avatar_img").show();
			$("#user_avatar_tip").hide();
		});
			
			$("#user_avatar_file").fileupload({
			    url:"{:U('System/File/uploadAvatar')}", 
			    done:function(e,result){
			    	var json = result.result;
			    	if (json.status) {
						$('#upload_tips').html('-上传成功');
						$("#user_avatar_img").attr("src", json.url);
						$('#user_avatar_hidden').val(json.id);

					} else {
						$('#upload_tips').html('-上传失败');
						$('#upload_tips').html('');
						$('#user_avatar_hidden').val('0');
						$("#user_avatar_img").hide();
						$("#user_avatar_img").attr("src", '__STATIC__/images/uploading.png');
						$("#user_avatar_tip").show();
						$('#user_avatar_file').val('');
					}
			    }
			});
			
		  

		$(function() {
			$('#addUserWizard').wizard();
		});
		 
		$("#user_avatar_tip").click(function() {
			$("#user_avatar_file").click();
		});

		$("#user_avatar_img").click(function() {
			$('#upload_tips').html('');
			$('#user_avatar_hidden').val('0');
			$("#user_avatar_img").hide();
			$("#user_avatar_img").attr("src", '__STATIC__/images/uploading.png');
			$("#user_avatar_tip").show();
		});
	</script> </block>
